<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="head-box flexWarpColumn" @tap="goLogin()">
					<view class="flexWrap">
						<view class="flexWrapNo">
							<image class="avatar-img" :src="userInfo.avatar||defaultAvatar"></image>
							<view class="userinfo-data flexWarpColumn">
								<view class="user-name">{{userInfo.nickname}}</view>
								<view class="user-lable-box flexWrapNo">
									<view class="user-lable">普通会员</view>
									<view class="telnum">{{userInfo.mobile}}</view>
								</view>
							</view>
						</view>
						<image src="../../static/user/edit-icon.png" class="edit-icon" @tap="goPage('/pages/user/editUserInfo')"></image>
					</view>
					<view class="balance-box flexWrap">
						<view class="balance-left">
							<view class="balance"><text>¥</text> {{userInfo.wallet||0}}</view>
							<view>卡余额</view>
						</view>
						<view class="recharge-btn" @tap.stop="goPage('/pages/user/balancereCharge')">充值</view>
					</view>
					<image src="../../static/user/userBg.png" class="userBg"></image>
				</view>
				<!-- <view class="balance-box flexWrap" v-if="paymentConfig.recharge==1">
					<view class="balance-item flexWarpColumn" @tap="goPage('/pages/user/balancereCharge')">
						<view class="balance-top flexWrap">
							<view class="money">¥ {{userInfo.wallet||0}}</view>
							<view class="recharge-btn">+</view>
						</view>
						<view class="tips">门店会员卡</view>
					</view>
					<view class="balance-item flexWarpColumn" @tap="goPage('/pages/user/platformRecharge')">
						<view class="balance-top flexWrap">
							<view class="money">¥{{userInfo.money||0}}</view>
							<view class="recharge-btn">+</view>
						</view>
						<view class="tips">小爱通卡</view>
					</view>
				</view> -->
				<view class="function-box">
					<view class="function-item flexWrap" @tap="goPage('/pages/user/joinInvite')">
						<view class="item-left flexWrapNo">
							<view class="item-icon">
								<image src="../../static/user/join-icon.png"></image>
							</view>
							加盟咨询
						</view>
						<text class="icon-more"></text>
					</view>
					<view class="function-item flexWrap" @tap="makePhoneCall()">
						<view class="item-left flexWrapNo">
							<view class="item-icon">
								<image src="../../static/user/customer-icon.png"></image>
							</view>
							客服电话	
						</view>
						<view class="item-right">
							{{phoneNumber}}
							<text class="icon-more"></text>
						</view>
					</view>
					<view class="function-item flexWrap" @tap="goPage('/pages/user/webView?url='+inviteLink)">
						<view class="item-left flexWrapNo">
							<view class="item-icon">
								<image src="../../static/user/member-icon.png"></image>
							</view>
							会员福利群
						</view>
						<view class="item-right">
							<text class="important">入群享优惠</text>
							<text class="icon-more"></text>
						</view>
					</view>
					<view class="function-item flexWrap" @tap="goPage('/pages/user/set')">
						<view class="item-left flexWrapNo">
							<view class="item-icon">
								<image src="/static/user/set-icon.png"></image>
							</view>
							设置
						</view>
						<text class="icon-more"></text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				phoneNumber:"",
				userInfo:{
					wallet:0,
					nickname:'去登录',
					mobile:"",
					avatar:"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
				},
				defaultAvatar:"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
				paymentConfig:{},
				inviteLink:"",
				shopName:""
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.getUserInfo();
			}
			this.phoneNumber=uni.getStorageSync('customerServiceMobile')
			this.inviteLink=uni.getStorageSync('crowdCode')
			this.paymentConfig=uni.getStorageSync('paymentConfig')
		},
		onLoad() {
			this.shopName=uni.getStorageSync('shop_name')||""
			// this.getInviteInfo();
		},
		methods: {
			goLogin(){
				if(!uni.getStorageSync('token')){
					uni.navigateTo({
						url: "/pages/login/login"
					});
				}
			},
			// 拨打电话
			makePhoneCall() {
				let that = this
				if(!that.phoneNumber){
					this.$tools.showToast('暂无客服电话')
					return;
				}
				uni.makePhoneCall({
					phoneNumber:that.phoneNumber
				})
			},
			// 获取用户信息
			getUserInfo(){
				this.$request.post(this.$api.userInfo, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.userInfo=data
					}
				})
			},
			// getInviteInfo(){
			// 	this.$request.post(this.$api.inviteInfo, {}, {}).then(res => {
			// 		let {
			// 			data = {}
			// 		} = res;
			// 		if (res.code==1) {
			// 			this.inviteLink=data.welfare_group_url
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 28upx;
	}
	.head-box{
		height: 228upx;
		background:linear-gradient(137deg, #FFD37B 0%, #FCA518 100%);
		padding: 38upx 42upx 38upx 26upx;
		border-radius: 16rpx;
		position: relative;
		.userBg{
			width: 313upx;
			height: 300upx;
			position: absolute;
			top: 24upx;
			right: 0;
		}
		.avatar-img{
			width: 110upx;
			height: 110upx;
			border-radius: 50%;
		}
		.edit-icon{
			width: 42upx;
			height: 42upx;
			flex: none;
			position: relative;
			z-index: 999;
		}
		.userinfo-data{
			margin-left: 24upx;
			.user-name{
				font-size: 40upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 60upx;
				color: #333;
			}
			.user-lable-box{
				margin-top: 16upx;
				.user-lable{
					background: #FFD58B;
					border-radius: 46upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 44upx;
					height: 44upx;
					color: #333;
					padding: 0 12upx;
					margin-right: 14upx;
				}
				.telnum{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34upx;
					color: #333;
				}
			}
		}
		.balance-box{
			margin-top: 20upx;
			position: relative;
			z-index: 999;
			.balance-left{
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #997E4B;
				.balance{
					font-size: 48rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #333333;
					text{
						font-size:24upx;
					}
				}
			}
			.recharge-btn{
				width: 118rpx;
				height: 60rpx;
				line-height: 60upx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #040336;
			}
		}
	}
	// .balance-box{
	// 	margin-top: 20upx;
	// 	.balance-item{
	// 		width: 290rpx;
	// 		height: 180rpx;
	// 		background: #1D1C5C;
	// 		border-radius: 16rpx 16rpx 16rpx 16rpx;
	// 		padding: 0 24upx;
	// 		justify-content: center;
	// 		flex: auto;
	// 		&:nth-of-type(2){
	// 			margin-left: 20upx;
	// 		}
	// 		.balance-top{
	// 			.money{
	// 				font-size: 48rpx;
	// 				font-family: PingFang SC-Medium, PingFang SC;
	// 				font-weight: 500;
	// 				color: #FFCC30;
	// 			}
	// 			.recharge-btn{
	// 				width: 52rpx;
	// 				height: 52rpx;
	// 				border-radius: 16rpx 16rpx 16rpx 16rpx;
	// 				border: 2rpx solid #25B9F9;
	// 				font-size: 30rpx;
	// 				font-family: PingFang SC-Medium, PingFang SC;
	// 				font-weight: 500;
	// 				color: #FFFFFF;
	// 				line-height: 52rpx;
	// 				text-align: center;
	// 				flex: none;
	// 			}
	// 		}
	// 		.tips{
	// 			font-size: 28rpx;
	// 			font-family: PingFang SC-Regular, PingFang SC;
	// 			font-weight: 400;
	// 			color: #FFFFFF;
	// 			margin-top: 10upx;
	// 		}
	// 	}
	// }
	.function-box{
		margin-top: 42upx;
		.function-title{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #111B3B;
			padding: 40rpx 36rpx;
		}
		.function-item{
			padding: 36rpx 0;
			position: relative;
			border-bottom: 3rpx solid #E3E3E3;
			.item-left{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #333;
				.item-icon{
					width: 48rpx;
					height: 48rpx;
					flex: none;
					margin-right: 17rpx;
				}
			}
			.item-right{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #333;
				.important{
					color:#E69C2F;
				}
			}
			.icon-more{
				border-color:#6E6E6E;
				border-width: 4rpx;
				margin-left: 10upx;
			}
		}
	}
</style>
